<template>
  <!--  好题试卷 横向卡片 组件-->
  <div class="listItem">
    <div class="itemImg">
      <img src="@/assets/imge/defeat_img.png" alt="tp" />
    </div>
    <div class="itemTiter">
      <p>2021年一级消防工程师《案例分析》考试真题</p>
      <span>历年真题</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeGoodTestListItem",
  props: ["foodItem"],
  components: {},
};
</script>

<style lang="less" scoped>
.listItem {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 4px 0px #e1e1e1;
  border-radius: 0.5rem;
  box-sizing: border-box;
  .itemImg {
    text-align: center;
    border-radius: 0.3rem;
    border: 1px solid #e9e9e9;
    img {
      width: 4.5rem;
      height: 4.5rem;
    }
  }
  .itemTiter {
    // position: relative;
    flex: auto;
    height: 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 0.5rem;
    box-sizing: border-box;
    p {
      width: 100%;
      margin: 0;
      color: #2a2929;
      font-size: 0.9rem;
      padding: 0;
      font-size: 0.88rem;
      font-weight: bold;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
    }
    span {
      background-color: #cccccc26;
      width: 4rem;
      text-align: center;
      font-size: 0.8rem;
      padding: 0.2rem;
      color: #686868;
    }
  }
}
</style>
